<!--
 * @Author: your name
 * @Date: 2021-09-26 15:10:03
 * @LastEditTime: 2021-09-29 19:10:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\views\others\test.vue
-->
<template>
    <Drawer
        :visible="visibles"
        placement="right"
        :closable="false"
        width="40%"
        @close="onClose"
    >
        <div ref="codeJson" class="codeJson">
            <div class="codeJson_header">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="codeJson_content">
                <pre>
                    <code>
{{ datas }}
                    </code>
               </pre>
            </div>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, ref, watch, unref } from 'vue'
import { Button, Drawer } from 'ant-design-vue'
import hljs from 'highlight.js' // 导入代码高亮文件
import 'highlight.js/styles/monokai-sublime.css'

export default defineComponent({
    name: 'Flowechart',
    components: {
        Button,
        Drawer,
    },
    props: {
        datas: String,
        visible: Boolean,
        codeData: {
            type: String,
            default: () => ({
                name: '暂无数据',
            }),
        },
    },
    emits: {
        handleClose: null,
    },
    setup(props, { emit }) {
        const codeJson = ref<HTMLDivElement | null>(null)
        const visibles = ref<Boolean>(false)
        //  如果不能监听到数据变化 需要将监听对象转化为原地址
        watch(
            () => unref(props.visible),
            () => {
                if (unref(props.visible)) {
                    visibles.value = unref(props.visible)
                    setTimeout(() => {
                        let warp = codeJson.value
                        let codes: HTMLCollectionOf<HTMLElement> | undefined = warp?.getElementsByTagName('code');
                        [...codes].forEach((block: any) => {
                            hljs.highlightBlock(block)
                        })
                    }, 1)
                } else {
                    visibles.value = unref(props.visible)
                }
            },
        )
        const onClose = () => {
            emit('handleClose', false)
        }
        return {
            codeJson,
            visibles,
            onClose,
        }
    },
})
</script>

<style lang="less" scoped>
.codeJson {
  background: #23241f;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.8);
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  &_header {
    display: flex;
    padding: 10px 0;
    & > span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      margin-left: 8px;
      &:nth-of-type(1) {
        background: #f86455;
      }
      &:nth-of-type(2) {
        background: #ffbb36;
      }
      &:nth-of-type(3) {
        background: #24cd37;
      }
    }
  }
}
/deep/ pre {
  display: inline-block;
  position: relative;
  min-height: 80vh;
  width: 100%;
  margin: 0;
}
pre /deep/ code.hljs {
  background: transparent;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
}
::-webkit-scrollbar {
  width: 7px;
  height: 8px;
}

// ::-webkit-scrollbar-track {
//   background: transparent;
// }

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0.3);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(121, 135, 141);
}
</style>
